.page-player-detail .base-select .base-select-arrow, .module-player-detail .player-introduce .icon-position, .module-player-detail .team-data .data-list li, .module-player-detail .game-record .game-score::before, .module-player-detail .game-record .game-score::after, .module-player-detail .game-record .equip-list li, .module-player-detail .game-record .skill-list li, .module-player-detail .game-record .rune-list li { background: url("//game.gtimg.cn/images/lpl/web202301/team-sprite.png") no-repeat; background-size: 220px 210px; }

body { --center-width: 1760px; --padding-left: 80px; }

.page-player-detail { position: relative; background: #f4f4f4; }

.page-player-detail *, .page-player-detail ::before, .page-player-detail ::after { box-sizing: border-box; outline: none; background-size: 100% auto; background-repeat: no-repeat; }

.page-player-detail .base-head { display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 16px; }

.page-player-detail .base-title { height: 24px; line-height: 30px; padding-left: 8px; border-left: 4px solid; font-family: 'block-title'; font-size: 24px; color: #1f232e; }

.page-player-detail .base-title.wihte { color: #fff; }

.page-player-detail .base-select { position: absolute; top: 50%; right: 0; z-index: 2; width: 250px; height: 25px; line-height: 23px; border: solid 1px #32384f; border-radius: 4px; font-size: 14px; text-align: center; color: #fff; background-color: #252b40; transform: translateY(-50%); cursor: pointer; }

.page-player-detail .base-select.white { width: 160px; border: solid 1px #b9b9b9; color: #676769; background-color: #fff; }

.page-player-detail .base-select.white .base-select-list { border: solid 1px #b9b9b9; color: #676769; background-color: #fff; }

.page-player-detail .base-select.white .base-select-list li:hover { color: #fff; background-color: #585e72; }

.page-player-detail .base-select.white .base-select-list li.active { color: #fff; background-color: #32384f; }

.page-player-detail .base-select .base-select-value { display: flex; justify-content: center; align-items: center; position: relative; }

.page-player-detail .base-select .base-select-arrow { position: relative; width: 16px; height: 9px; margin-left: 10px; background-position: -24px -2px; }

.page-player-detail .base-select .base-select-arrow.active { transform: scaleY(-1); }

.page-player-detail .base-select .base-select-list { display: none; position: absolute; top: calc(100% + 5px); left: 0; width: 100%; border: solid 1px #32384f; border-radius: 4px; font-size: 14px; text-align: center; color: #fff; background-color: #252b40; }

.page-player-detail .base-select .base-select-list.active { display: block; }

.page-player-detail .base-select .base-select-list li { line-height: 25px; }

.page-player-detail .base-select .base-select-list li.active { background-color: #2f395c; }

.module-player-detail { display: flex; height: 908px; margin: 0 auto; }

.module-player-detail .player-detail-left { width: 610px; padding: 0 80px 0 var(--padding-left); background-color: #1d212c; background-image: url("//game.gtimg.cn/images/lpl/web202301/detail-adorn.png"); box-sizing: content-box; }

.module-player-detail .player-detail-right { padding-top: 30px; padding-left: 58px; }

.module-player-detail .player-introduce { position: relative; }

.module-player-detail .player-introduce .player-detail { display: flex; width: 610px; height: 438px; padding-top: 48px; }

.module-player-detail .player-introduce .player-info { width: 260px; margin-left: 40px; padding-top: 7px; }

.module-player-detail .player-introduce .player-image { width: 310px; height: 310px; }

.module-player-detail .player-introduce .player-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.module-player-detail .player-introduce .team-logo { width: 150px; height: 150px; margin-left: -30px; }

.module-player-detail .player-introduce .team-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.module-player-detail .player-introduce .player-cn-name { display: flex; align-items: center; line-height: 60px; margin-top: 8px; font-family: 'block-title'; font-size: 40px; color: #fff; }

.module-player-detail .player-introduce .icon-position { position: relative; width: 40px; height: 40px; margin-left: 10px; margin-top: -12px; background-position: 40px 40px; }

.module-player-detail .player-introduce .icon-position.top { background-position: -2px -160px; }

.module-player-detail .player-introduce .icon-position.jug { background-position: -44px -160px; }

.module-player-detail .player-introduce .icon-position.mid { background-position: -86px -160px; }

.module-player-detail .player-introduce .icon-position.adc { background-position: -128px -160px; }

.module-player-detail .player-introduce .icon-position.sup { background-position: -170px -160px; }

.module-player-detail .player-introduce .player-en-name { line-height: 100px; margin-top: 8px; font-family: 'LPLKorium-Headline'; font-size: 100px; color: #fff; }

.module-player-detail .team-data { position: relative; }

.module-player-detail .team-data .btn-box { width: 138px; height: 25px; box-sizing: border-box; border: 1px solid #455173; border-top-left-radius: 9px; border-bottom-right-radius: 9px; }

.module-player-detail .team-data .btn-box::before { content: ''; display: block; width: 69px; height: 25px; background: #ff003f; border-top-left-radius: 9px; border-bottom-right-radius: 9px; position: absolute; top: -1px; left: -1px; transition: left 300ms; }

.module-player-detail .team-data .btn-box[data-index='1']::before { left: 50%; }

.module-player-detail .team-data .btn-switch { float: left; width: 50%; height: 100%; color: #455173; font-size: 12px; line-height: 23px; text-align: center; }

.module-player-detail .team-data .btn-switch.active { color: #fff; transition: color 300ms; }

.module-player-detail .team-data .switch-content { display: none; }

.module-player-detail .team-data .switch-content.active { display: block; }

.module-player-detail .team-data .data-list { display: flex; flex-wrap: wrap; justify-content: space-between; }

.module-player-detail .team-data .data-list li { position: relative; width: 180px; height: 86px; text-align: center; background-position: -2px -21px; }

.module-player-detail .team-data .data-list li:not(:nth-of-type(-n + 3)) { margin-top: 15px; }

.module-player-detail .team-data .data-list .value { line-height: 38px; font-family: 'DIN-Bold'; font-size: 28px; color: #ffdda0; }

@supports (-webkit-background-clip: text) { .module-player-detail .team-data .data-list .value { background-image: linear-gradient(to bottom, #fff4df, #ffdda0); -webkit-background-clip: text; background-clip: text; color: transparent; } }

.module-player-detail .team-data .data-list .value span { font-size: 16px; }

.module-player-detail .team-data .data-list .label { position: absolute; bottom: 32px; left: 50%; font-size: 12px; white-space: nowrap; color: #b9b9ba; transform: translateX(-50%); }

.module-player-detail .team-data .data-list .rank { position: absolute; bottom: 8px; left: 50%; font-size: 12px; white-space: nowrap; color: #c0d0ff; text-align: center; line-height: 20px; transform: translateX(-50%); display: block; width: 84px; height: 20px; border-radius: 10px; background: #434d6a; }

.module-player-detail .team-data .data-list .rank span { color: #fff; font-size: 16px; font-family: 'DIN-Bold'; display: inline-block; vertical-align: top; }

.module-player-detail .team-data .data-chart { position: relative; height: 400px; }

.module-player-detail .chart-label { color: #fff; font-size: 16px; line-height: 24px; font-family: 'DIN-Bold'; text-align: center; width: 100px; height: 24px; }

.module-player-detail .chart-label:nth-of-type(1) { top: -2px; left: 255px; }

.module-player-detail .chart-label:nth-of-type(2) { top: 86px; left: 71px; }

.module-player-detail .chart-label:nth-of-type(3) { top: 246px; left: 71px; }

.module-player-detail .chart-label:nth-of-type(4) { top: 373px; left: 255px; }

.module-player-detail .chart-label:nth-of-type(5) { top: 246px; left: 426px; }

.module-player-detail .chart-label:nth-of-type(6) { top: 86px; left: 442px; }

.module-player-detail .player-detail-panel { position: relative; width: 1012px; }

.module-player-detail .player-detail-panel:not(:first-of-type) { margin-top: 30px; }

.module-player-detail .hero-list { display: flex; flex-wrap: wrap; height: 172px; }

.module-player-detail .hero-list li { position: relative; width: 109px; height: 172px; margin-right: 20px; border-radius: 6px; overflow: hidden; box-sizing: border-box; background-color: #2c3041; }

.module-player-detail .hero-list li:nth-of-type(8n) { margin-right: 0; }

.module-player-detail .hero-list .image { position: relative; width: 109px; height: 131px; }

.module-player-detail .hero-list .image img { display: block; width: 109px; height: 109px; }

.module-player-detail .hero-list .name { position: absolute; bottom: 0; left: 0; width: 100%; height: 22px; line-height: 22px; font-size: 13px; text-align: center; color: #fff; }

.module-player-detail .hero-list .data { display: flex; justify-content: space-between; margin-top: 1px; padding-top: 3px; height: 40px; position: relative; }

.module-player-detail .hero-list .data::before { content: ''; display: block; width: 86%; height: 1px; border-bottom: 1px solid #40465e; position: absolute; bottom: 100%; left: 50%; margin-left: -43%; }

.module-player-detail .hero-list .data .value { width: 54px; position: relative; font-size: 12px; line-height: 16px; color: #fff; text-align: center; }

.module-player-detail .hero-list .data .value:not(:first-of-type)::before { content: ''; position: absolute; top: 50%; left: -1px; width: 1px; height: 21px; border-left: 1px solid #40465e; transform: translateY(-50%); }

.module-player-detail .hero-list .data span { display: block; padding-left: 1px; font-family: 'DIN-Bold'; font-size: 14px; color: #ffdea4; }

.module-player-detail .game-record { position: relative; }

.module-player-detail .game-record .record-row { display: flex; }

.module-player-detail .game-record .record-col { display: flex; justify-content: center; align-items: center; flex: 1; }

.module-player-detail .game-record .record-col:nth-of-type(1) { justify-content: flex-start; flex: 0 0 110px; padding-left: 14px; }

.module-player-detail .game-record .record-col:nth-of-type(2) { flex: 0 0 170px; }

.module-player-detail .game-record .record-col:nth-of-type(3) { flex: 0 0 90px; }

.module-player-detail .game-record .record-col:nth-of-type(4) { flex: 0 0 80px; }

.module-player-detail .game-record .record-col:nth-of-type(5) { flex: 0 0 220px; }

.module-player-detail .game-record .record-col:nth-of-type(6) { flex: 0 0 80px; }

.module-player-detail .game-record .record-col:nth-of-type(7) { flex: 0 0 80px; }

.module-player-detail .game-record .record-head { height: 45px; line-height: 50px; border-radius: 6px; font-family: 'block-title'; font-size: 18px; color: #fff; background-color: #2c3041; overflow: hidden; }

.module-player-detail .game-record .record-body { position: relative; }

.module-player-detail .game-record .record-body .record-item { height: 60px; line-height: 60px; margin-top: 17px; border-radius: 6px; font-size: 16px; background: linear-gradient(to right, #2fc7e9 5px, #fff 5px); overflow: hidden; }

.module-player-detail .game-record .record-body .record-item.status-lost { background: linear-gradient(to right, #ff0d49 5px, #ffeded 5px); }

.module-player-detail .game-record .record-body .record-item.status-lost .game-score::before { opacity: 0; }

.module-player-detail .game-record .record-body .record-item.status-lost .game-score::after { opacity: 1; }

.module-player-detail .game-record .game-info { display: flex; justify-content: center; align-items: center; }

.module-player-detail .game-record .game-score { display: flex; justify-content: center; align-items: center; width: 86px; position: relative; }

.module-player-detail .game-record .game-score::before, .module-player-detail .game-record .game-score::after { content: ''; display: block; width: 8px; height: 7px; position: absolute; top: 50%; margin-top: -3.5px; }

.module-player-detail .game-record .game-score::before { background-position: -42px -2px; left: 3px; }

.module-player-detail .game-record .game-score::after { background-position: -52px -2px; right: 3px; opacity: 0; }

.module-player-detail .game-record .game-team { display: flex; flex-direction: column; align-items: center; position: relative; text-align: center; }

.module-player-detail .game-record .game-team .image { width: 34px; height: 34px; }

.module-player-detail .game-record .game-team .image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.module-player-detail .game-record .game-button-group { display: flex; align-items: center; }

.module-player-detail .game-record .game-button { display: block; position: relative; width: 68px; height: 25px; line-height: 25px; border-radius: 10px 0px 10px 0px; font-size: 12px; text-align: center; }

.module-player-detail .game-record .game-button:not(:first-of-type) { margin-left: 5px; }

.module-player-detail .game-record .game-button.playback { color: #fff; background-color: #2c3041; }

.module-player-detail .game-record .game-button.coming { color: #fff; background-color: #959595; }

.module-player-detail .game-record .game-button.live { color: #fff; background-color: #ff003f; }

.module-player-detail .game-record .game-button.info { border: 1px solid; color: #2c324d; }

.module-player-detail .game-record .game-button.info:hover { color: #ff003f; }

.module-player-detail .game-record .hero-image { position: relative; width: 39px; height: 39px; border-radius: 6px; overflow: hidden; }

.module-player-detail .game-record .hero-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.module-player-detail .game-record .equip-list { display: flex; }

.module-player-detail .game-record .equip-list li { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 6px; overflow: hidden; background-position: -184px -2px; }

.module-player-detail .game-record .equip-list li:not(:first-of-type) { margin-left: 2px; }

.module-player-detail .game-record .equip-list li img { display: block; width: 100%; height: 100%; object-fit: cover; }

.module-player-detail .game-record .skill-list { display: flex; }

.module-player-detail .game-record .skill-list li { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 6px; overflow: hidden; background-position: -184px -2px; }

.module-player-detail .game-record .skill-list li:not(:first-of-type) { margin-left: 2px; }

.module-player-detail .game-record .skill-list li img { display: block; width: 100%; height: 100%; object-fit: cover; }

.module-player-detail .game-record .rune-list { display: flex; }

.module-player-detail .game-record .rune-list li { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 6px; overflow: hidden; background-position: -184px -32px; }

.module-player-detail .game-record .rune-list li:not(:first-of-type) { margin-left: 2px; }

.module-player-detail .game-record .rune-list li img { display: block; width: 26px; height: 26px; margin: 1px; object-fit: cover; }

.module-player-detail .game-record .rune-list li img.jm { margin: 0 0 0 1.5px; }

.module-player-detail .game-record .rune-list li img.presstheattack { margin-top: 0; }

.module-player-detail .game-record .rune-list li img.lethaltempotemp { margin-top: 3px; }

.module-player-detail .game-record .rune-list li img.conqueror { margin-top: 1.5px; }

.module-player-detail .game-record .rune-list li img.fleetfootwork { margin: 2px 0 0 3px; }

.module-player-detail .game-record .rune-list li img.zz { margin-left: 1.5px; }

.module-player-detail .game-record .rune-list li img.electrocute { margin-top: 2px; }

.module-player-detail .game-record .rune-list li img.predator { margin-top: 2px; }

.module-player-detail .game-record .rune-list li img.darkharvest { margin-top: 2px; }

.module-player-detail .game-record .rune-list li img.ws { margin-left: 0.5px; }

.module-player-detail .game-record .rune-list li img.summonaery { margin-top: 1.5px; }

.module-player-detail .game-record .rune-list li img.arcanecomet { margin: 2px 0 0 1.5px; }

.module-player-detail .game-record .rune-list li img.phaserush { margin: 2px 0 0 0; }

.module-player-detail .game-record .rune-list li img.jj { margin-left: 0.5px; }

.module-player-detail .game-record .rune-list li img.graspoftheundying { margin-top: 2px; }

.module-player-detail .game-record .rune-list li img.veteranaftershock { margin-top: 2px; }

.module-player-detail .game-record .rune-list li img.guardian { margin-top: 1.5px; }

.module-player-detail .game-record .rune-list li img.qd { margin: 0.8px 0 0 0.2px; }

.module-player-detail .game-record .rune-list li img.glacialaugment { margin-top: 2.5px; }

.module-player-detail .game-record .rune-list li img.unsealedspellbook { margin-top: 2.5px; }

.module-player-detail .game-record .rune-list li img.firststrike { margin: -0.5px 0 0 3.5px; }

.module-player-detail .record-pagination { padding-top: 30px; color: #848484; font-size: 14px; line-height: 1.5; display: flex; justify-content: center; align-items: center; }

.module-player-detail .record-pagination input { -webkit-appearance: none; appearance: none; outline: none; border-radius: 3px; margin: 0 5px; width: 28px !important; color: #848484; font-size: 14px; text-align: center; border-width: 1px; }

.module-player-detail .record-pagination .pageprenone { margin-right: 11px; }

.module-player-detail .record-pagination .pagepre, .module-player-detail .record-pagination .pagenow { color: #848484; text-align: center; line-height: 16px; min-width: 17px; height: 17px; box-sizing: border-box; padding: 0 4px; border-radius: 3px; margin-right: 11px; }

.module-player-detail .record-pagination .pagenow { color: #fff; background: #fe003f; }

.module-player-detail .record-pagination .previouspage, .module-player-detail .record-pagination .previouspageone, .module-player-detail .record-pagination .pagenext, .module-player-detail .record-pagination .pagenextnone, .module-player-detail .record-pagination .pagejump { width: auto; color: #2d2d2d; text-decoration: underline; }

.module-player-detail .record-pagination .previouspage, .module-player-detail .record-pagination .previouspageone { margin-right: 33px; }

.module-player-detail .record-pagination .pagenext, .module-player-detail .record-pagination .pagenextnone { margin-left: 33px; }

.module-player-detail .record-pagination .previouspageone, .module-player-detail .record-pagination .pagenextnone { color: #979797; pointer-events: none; }

.module-player-detail .record-pagination .pagejump { margin-left: 11px; }

.c-breadcrumb { z-index: 4; }

/* ios */
.ios .page-player-detail .base-title { line-height: 22px; }

.ios .module-player-detail .player-introduce .icon-position { margin-top: 2px; }

.ios .module-player-detail .player-introduce .player-cn-name { margin-top: -2px; }

.ios .module-player-detail .player-introduce .player-en-name { margin-top: -2px; }

.ios .module-player-detail .game-record .record-head { line-height: 44px; }

/* nav */
.center-wrap { max-width: var(--center-width); }